<template>
  <div class="tab-item" :class="{ active: isActive }">
    <el-avatar shape="square" v-if="isAvatar" :size="40" :src="icon" />
    <svg-icon v-else :icon-class="icon" size="24" />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  isAvatar: Boolean,
  icon: String,
  isActive: Boolean,
});
</script>

<style scoped lang="scss">
.tab-item {
  padding: 10px 10px;
  text-align: center;
  cursor: pointer;

  :hover {
    filter: brightness(0.5);
  }
}

.active {
  filter: brightness(0);
}
</style>
